<template>
	<z-paging-swiper>
		<view style="background-color: white;" slot="top">
			<view class="header">
				<image src="../../../static/left.png" class="back" @click="back"></image>
				<view class="search">
					<image src="../../../static/serch.png" class="search_img"></image>
					<input class="input" placeholder="请输入查询内容" v-model="searchSrc" @input="bindinput"
						confirm-type="search" @confirm="doSearch" />
				</view>
				<text class="searchTxt" @click="search">搜索</text>
			</view>

			<z-tabs v-if="searchContent != '' && searchSrc != ''" ref="tabs" :list="tabList" :current="isChange" @change="tabsChange"
				barWidth="70" barHeight="5" bottomSpace="0" />
		</view>

		<!-- <view class="history" v-if="searchContent == '' || searchSrc == ''">
			<view class="his_title">
				<view class="his_line"></view>
				<text class="his_text">历史搜索</text>
				<image src="../../../static/delete.png" style="width: 28rpx;height: 28rpx;"></image>
			</view>

			<view class="his_list">
				<view class="his_item" v-for="item in hisList"> 
					{{item}}
				</view>
			</view>
		</view> -->

		<swiper v-if="searchContent != ''" class="swiper" :current="isChange" @change="swiperChange"
			@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item v-for="(item, index) in tabList" :key="index">
				<swiper-home-waterSavingNews v-if="index == 0 || index == 1" :searchParam="searchContent"
					:tabIndex="index" :currentIndex="isChange"></swiper-home-waterSavingNews>
				<swiper-home-Notice v-if="index == 3" :searchParam="searchContent" :tabIndex="index"
					:currentIndex="isChange"></swiper-home-Notice>
				<swiper-home-PoliciesRegulations v-if="index == 2" :searchParam="searchContent" :tabIndex="index"
					:currentIndex="isChange"></swiper-home-PoliciesRegulations>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['节水要闻', '节水科普', '政策法规', '通知公告'],
				isChange: 0,
				searchContent: '',
				searchSrc: '',
				hisList: ['节水型农业', '法规', '节水型农业', '公告', '水环境治理科普活动']
			}
		},
		
		onLoad(option) {
			this.isChange = option.tab
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this.isChange = index;
			},
			//swiper change时触发
			swiperChange(e) {
				// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				let current = e.target.current || e.detail.current;
				this.tabsChange(current);
				// #endif
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.isChange = e.detail.current;
				this.$refs.tabs.unlockDx();
			},

			bindinput(e) {

			},

			doSearch(e) {
				console.log('doSearch', e)
				this.searchContent = e.detail.value;
			},

			search() {
				this.searchContent = this.searchSrc
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		width: 100%;
		height: 88rpx;
		padding-left: 12px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 88rpx;
	}

	.back {
		width: 23px;
		height: 23px;
	}

	.search {
		width: 540rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 33rpx;
		border: 1rpx solid #1677FF;
		margin-left: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.input {
		width: 100%;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
		margin-left: 17rpx;
	}

	.search_img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 23rpx;
	}

	scroll-view {

		white-space: nowrap;
		/* position: fixed; */
	}

	.swiper {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */

	}

	.searchTxt {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1677FF;
		line-height: 48rpx;
		margin-left: 24rpx;
	}

	.history {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
		display: flex;
		flex-direction: column;
	}

	.his_title {
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 45rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	.his_line {
		width: 3px;
		height: 13px;
		background: #1677FF;
		border-radius: 4rpx;
	}

	.his_text {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
		margin-left: 14rpx;
		flex: 1;
	}

	.his_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
		margin-top: 5rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
	}

	.his_item {
		width: auto;
		height: auto;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		margin-left: 8rpx;
		margin-right: 8rpx;
		margin-top: 16rpx;
		background: #FFFFFF;
		border-radius: 33rpx;
		justify-content: center;
		align-items: center;
		padding: 12rpx 24rpx;
		display: flex;
	}
</style>
